<!-- 泵乳日志 -->
<!-- 
    2020年11月4日 
    2021年11月15日重置 
-->
<style>
    .wrapper[data=pumpBreastList] {
        width: 100%;
        min-height: 100%;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 0 5px rgba(0, 0, 0, .1);
        box-sizing: border-box;
        padding: 20px;
    }

    .wrapper[data=pumpBreastList] .search {
        width: 100%;
        margin-bottom: 10px;
    }

    .wrapper[data=pumpBreastList] .search .block {
        max-width: 214px;
        height: 100%;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding-left: 10px;
        vertical-align: top;
        margin-bottom: 10px;
    }

    .wrapper[data=pumpBreastList] .search .block .key {
        max-width: 150px;
        min-width: 80px;
        line-height: 32px;
        text-align: right;
        padding-right: 10px;
    }

    .wrapper[data=pumpBreastList] .search .block .val {
        width: 150px;
    }

    .wrapper[data=pumpBreastList] .footer {
        text-align: right;
        padding-top: 20px;
    }

    .wrapper .content {
        padding: 20px;
    }

    .el-table--border,
    .el-table--group {
        border: 1px solid #ddd;
    }

    .el-table td,
    .el-table th.is-leaf {
        border-bottom: 1px solid #ddd;
    }

    .el-table--border td,
    .el-table--border th,
    .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
        border-right: 1px solid #ddd;
    }

    .el-table--enable-row-transition .el-table__body td {
        padding: 4px 0;
    }
</style>

<body>
    <div class="wrapper" data="pumpBreastList">
        <div class="search">
            <div class="block">
                <span class="key">住院号</span>
                <el-input class="val" size="small" v-model="form.hosiptalNo" placeholder="请输入住院号" />
            </div>
            <div class="block">
                <span class="key">宝宝姓名</span>
                <el-input class="val" size="small" v-model="form.name" placeholder="请输入宝宝姓名" />
            </div>
            <div class="block">
                <span class="key">床号</span>
                <el-input class="val" size="small" v-model="form.bedNo" placeholder="请输入床号" />
            </div>
            <div class="block">
                <span class="key">宝宝性别</span>
                <el-select class="val" size="small" v-model="form.gender" placeholder="请选择宝宝性别">
                    <el-option value="0" label="不限" />
                    <el-option value="1" label="男" />
                    <el-option value="2" label="女" />
                </el-select>
            </div>
            <div class="block" size="small">
                <span class="key">母亲姓名</span>
                <el-input class="val" size="small" v-model="form.matherName" placeholder="请输入母亲姓名" />
            </div>
            <el-button type="primary" icon="el-icon-search" size="small" style="margin-left: 20px;"
                @click="handleSearch">查询</el-button>
            <el-button type="warning" icon="el-icon-close" size="small" style="margin-left: 20px;"
                @click="handleClear">清空</el-button>
        </div>

        <el-table :data="table.data" v-loading="table.loading" border>
            <el-table-column label="床号" align="center" width="100">
                <template slot-scope="scope">
                    {{ scope.row.zcejd_ch ? scope.row.zcejd_ch : '—' }}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="Pub1100002" label="宝宝姓名" />
            <el-table-column label="住院号" align="center" width="100">
                <template slot-scope="scope">
                    {{ scope.row.Pub12x00008 ? scope.row.Pub12x00008 : '—' }}
                </template>
            </el-table-column>
            <el-table-column align="center" width="100" label="性别">
                <template slot-scope="scope">
                    {{ transformGenger(scope.row.Pub1100003) }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="母亲姓名">
                <template slot-scope="scope">
                    {{ scope.row.zcejd_mqxm ? scope.row.zcejd_mqxm : '/' }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="首次泌乳时间">
                <template slot-scope="scope">
                    {{ getDate(scope.row) }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="出生时间与首次泌乳时间差">
                <template slot-scope="scope">
                    {{ getReduce(scope.row) }}
                </template>
            </el-table-column>
            <el-table-column align="center" width="200px" label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="handleToDetail(scope.row)">泵乳详情</el-button>
                    <el-button type="warning" size="mini" @click="handleToCount(scope.row)">泵乳统计</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="footer">
            <el-pagination background layout="prev, pager, next, total, sizes" @current-change="handleChangePage"
                @size-change="handleSizeChange" :page-size="table.size" :total="table.total">
            </el-pagination>
        </div>
    </div>
</body>
<script>
    require(['bbcare'], function ($bb) {
        var URL = location.href.indexOf('192.168.3.141') > -1 ?
            "/fullow/" : $bb.baseUrl('followup')

        var vm = new Vue({
            el: '.wrapper',
            data: function () {
                return {
                    form: {
                        hosiptalNo: '',
                        name: '',
                        bedNo: '',
                        matherName: '',
                        gender: '0'
                    },
                    table: {
                        data: [],
                        current: 1,
                        total: 0,
                        size: 10,
                        loading: false
                    }
                }
            },
            created: function () {
                var queueId
                try {
                    queueId = $('.content-main').data()
                    queueId = queueId.params.followQueueId
                    this.queueId = queueId
                } catch (err) {
                    this.$confirm('获取队列ID失败！从新进入此页面', '提示', {
                        confirmButtonText: '确定',
                        showCancelButton: false,
                        type: 'warning'
                    })
                }
                try {
                    var info = JSON.parse(sessionStorage.getItem('pumpBreastPatientInfo'))
                    this.form.hosiptalNo = info.Pub12x00008 == '无' ? '' : info.Pub12x00008
                    this.form.bedNo = info.zcejd_ch == '无' ? '' : info.zcejd_ch
                    this.form.name = info.Pub1100002
                    sessionStorage.removeItem('pumpBreastPatientInfo')
                } catch (err) { }

                this.getTableData()
            },
            methods: {
                /**
                 * 按条件查询
                 */
                handleSearch: function () {
                    this.getTableData()
                },
                /**
                 * 清除条件并搜索
                 */
                handleClear: function () {
                    this.form = {
                        hosiptalNo: '',
                        name: '',
                        matherName: '',
                        gender: '0'
                    }
                    sessionStorage.removeItem('pumpBreastPatientInfo')
                    this.getTableData()
                },
                /**
                 * 改变页码
                 * @param { number } val
                 */
                handleChangePage: function (val) {
                    this.table.current = val
                    this.getTableData()
                },
                /**
                 * 改变页大小
                 * @param { number } val
                 */
                handleSizeChange: function (val) {
                    this.table.size = val
                    this.getTableData()
                },
                /**
                 * 去泵乳详情页面
                 * @param { object } row data
                 */
                handleToDetail: function (row) {
                    var data = {
                        id: row.patientId,
                        birth: row.Pub1100004
                    }
                    sessionStorage.setItem('pumpBreastPatientInfo', JSON.stringify(row))
                    $bb.openPage('pumpBreastTable', data)
                },
                /**
                 * 去统计详情
                 * @param { object } row data
                 */
                handleToCount: function (row) {
                    var data = {
                        id: row.patientId,
                        birth: row.Pub1100004
                    }
                    sessionStorage.setItem('pumpBreastPatientInfo', JSON.stringify(row))
                    $bb.openPage('pumpBreastDetail', data)
                },
                /**
                 * 计算泌乳时间
                 */
                getDate: function (row) {
                    var date = row.zcejd_scmrrq ? row.zcejd_scmrrq : ''
                    var time = row.zcejd_scmrsj ? row.zcejd_scmrsj : '/'
                    return date + ' ' + time
                },
                /**
                 * 计算时间差
                 */
                getReduce: function (row) {
                    if (row.Pub1100004 && row.zcejd_bbcssj && row.zcejd_scmrrq && row.zcejd_scmrsj) {
                        var birth = new Date(row.Pub1100004 + ' ' + row.zcejd_bbcssj + ':00').getTime() / 1000
                        var target = new Date(row.zcejd_scmrrq + ' ' + row.zcejd_scmrsj + ':00').getTime() / 1000
                        var reduce = target - birth

                        var day = 3600 * 24, hour = 3600,
                            date = Math.floor(Math.abs(reduce) / day),
                            hour = Math.floor((Math.abs(reduce) - date * day) / 3600),
                            min = Math.floor((Math.abs(reduce) - date * day - hour * 3600) / 60)

                        console.log(reduce, date, hour, min)

                        return (reduce < 0 ? '-' : '') + (date == 0 ? '' : date + '天') + (hour == 0 ? '' : hour + '小时') + (min == 0 ? '' : min + '分钟')
                    } else {
                        return '/'
                    }
                },
                /**
                 * 转换性别显示文字
                 * @param { object } row data
                 */
                transformGenger: function (val) {
                    switch (val) {
                        case '男':
                            return '男'
                        case '女':
                            return '女'
                        case 'N':
                            return '男'
                        case 'F':
                            return '女'
                        default:
                            return '未知'
                    }
                },
                /**
                 * 获取表格数据
                 */
                getTableData: function () {
                    var param = {
                        currentPage: this.table.current,
                        gender: this.form.gender == '0' ? '' : this.form.gender,
                        hospitalNumber: this.form.hosiptalNo,
                        bedNo: this.form.bedNo,
                        motherName: this.form.matherName,
                        pageSize: this.table.size,
                        patientName: this.form.name,
                        queueId: this.queueId
                    }, that = this
                    that.table.loading = true
                    $bb.ajax({
                        url: URL + 'followup/webapi/service/dumpBreastRecord/patientList',
                        data: JSON.stringify(param),
                        dataType: 'json',
                        success: function (res) {
                            that.table.data = res.data.data
                            that.table.total = res.data.count
                            that.table.loading = false
                        }
                    })
                }
            }
        })
    })
</script>